<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../web_p2/_reset.css">
    <link rel="stylesheet" href="./css/base_1.css">
    <link rel="stylesheet" href="./css/common2.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>

    <div class="mobile_app">
        <!-- 头部 -->
        <header>
        <!-- 左上角Logo -->
        <div class="top_logo">
            <a href="./detail.html">
              <img src="./img/page1/LOGO.png" alt="">
            </a>
            
        </div>
        <div class="search_bar">
         <input  class="search_btn" type="text" placeholder="请输入商品名称">
        </div>
        <div class="select_city">
            <select name="" id="">
                <option value="">广州市</option>
                <option value="">深圳市</option>
            </select>
        </div>
        
        </header>
        <!-- 主体 -->
        <main>
      <!-- 轮播图 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/page1/图层1.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/page1/slide2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/page1/slide3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- 优惠团购 -->
      <div class="cheap_shop">
        <div class="cheap_shop_hd"><div class="cheap_shop_title"><img src="./img/page1/团购.png" alt=""><span class="cheap_shop_title_words" >优惠团购</span></div>
        <a href=""><span>更多<i class="iconfont title_right">&#xe638;</i></span></a></div>
        <a href="" class="discount_link"><img src="./img/page1/图层5.png" alt=""></a>
        <a href="" class="discount_link"><img src="./img/page1/图层7.png" alt=""></a>
        <a href="" class="discount_link"><img src="./img/page1/图层6.png" alt=""></a>
        <a href="" class="discount_link"><img src="./img/page1/图层8.png" alt=""></a>
      </div>
      <div class="you_like">
        <div class="you_like_title"><i class="iconfont heart">&#xe62f;</i><p class="heart_words">猜你喜欢</p></div>
        <a href=""><span> 更多<i class="iconfont f2_title_right">&#xe638;</i></span></a>
      </div>
      <div class="shop_content">
            <div class="shop_f1">
                <div class="shop_cover"><img src="./img/page1/图层3.png" alt=""></div>
                <div class="commodity_content">
                  <div class="shop_name"><span class="name">万岁寿司（正佳店）</span><span class="distance"> <100m </span></div>
                  <div class="desc_f1"><span class="desc_f1_type_a">[100店通用]</span> <span class="desc_f1_type_b">双人套餐</span> </div>
                  <div class="price"><span class="com_price">￥88.00 </span><span class="number">已售1000</span></div>
                </div>
          </div>
          <div class="shop_f2">
            <div class="shop_cover"><img src="./img/page1/图层4.png" alt=""></div>
            <div class="commodity_content">
              <div class="shop_name"><span class="name">周黑鸭（正佳店）</span><span class="distance"> <100m </span></div>
                <div class="desc_f1"><span class="desc_f1_type_a">[100店通用]</span> <span class="desc_f1_type_b">双人套餐</span> </div>
              <div class="price"><span class="com_price">￥88.00 </span><span class="number">已售1000</span></div>
            </div>
        </div>
        <div class="shop_f3">
            <div class="shop_cover"><img src="./img/page1/麦当劳.jpg" alt=""></div>
            <div class="commodity_content">
              <div class="shop_name"><span class="name">麦当劳（正佳店）</span><span class="distance"> <100m </span></div>
                <div class="desc_f1"><span class="desc_f1_type_a">[100店通用]</span> <span class="desc_f1_type_b">双人套餐</span> </div>
              <div class="price"><span class="com_price">￥88.00 </span><span class="number">已售1000</span></div>
            </div>
        </div>
      </div>

        </main>
        <!-- 底部 -->
        <footer>
            <!-- 底部导航 -->
          <a href="#"><i class="iconfont bottom_pic">&#xe634;</i><p>首页</p></a>
          <a href="./classify.html"><i class="iconfont bottom_pic">&#xeac4;</i><p>分类</p></a>
          <a href="./find.html"><i class="iconfont bottom_pic">&#xe8af;</i><p>发现</p></a>
          <a href="./mine.html"><i class="iconfont bottom_pic">&#xe8a0;</i><p>我的</p></a>
        </footer>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal',
          autoplay : 1000,
          loop: true,
          
          // 如果需要分页器
          pagination: '.swiper-pagination',
          
          // 如果需要前进后退按钮
        //   nextButton: '.swiper-button-next',
        //   prevButton: '.swiper-button-prev',
          
          // 如果需要滚动条
          scrollbar: '.swiper-scrollbar',
        })        
        </script>
</body>
</html>